<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>材料库列表页</title>
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/container.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/number.css">
    <link rel="stylesheet" href="../css/parent.css">
    <link rel="stylesheet" href="../css/page.css">
    <link rel="stylesheet" href="../css/weixin.css">
    <link rel="stylesheet" href="../css/footer.css">
  
</head>
<body>
    <!-- 家居医生logo -->
    <div class="logo"></div>
    <div class="header">
            <div class="container">
                <a href="#"><b>首页</b></a>
                <a href="#"><b>咨询</b></a>
                <a href="#"><b>测评</b></a>
                <a href="#"><b>商城</b></a>
                <div class="start">
                    <i class="icon"></i>
                    <span class="text first">深圳</span>
                    <span class="text"><切换></span>
                </div>
                <div class="end">
                    <span class="icon"></span>
                    <span class="adm">个人中心</span>
                </div>
            </div>
    </div>
    
    <!-- 首页资讯测评 -->
            <div class="nav">
            <div class="menu">
                    <a href="#"><b>首页&nbsp;</b></a>
                    <a href="#">&nbsp;>&nbsp;</a>
                    <a href="#"><b>&nbsp;预防装修污染&nbsp;</b></a>
                    <a href="#">&nbsp;>&nbsp;</a>
                    <a href="#"><b>&nbsp;材料库</b></a>                
            </div>
            </div>
    
    <!-- 类别 -->
            <div class="number">
            <div class="tab">
                <div class="sort">
                        <ul>    
                            <li class="A"><a href="#">类别</a></li>  
                            <li><a href="#">全部</a></li>
                            <li><a href="#">地板</a></li>
                            <li><a href="#">涂料</a></li>
                            <li><a href="#">墙纸</a></li>
                            <li><a href="#">瓷砖</a></li>
                            <li><a href="#">粘胶剂</a></li>
                            <li><a href="#">油漆</a></li>
                            <li><a href="#">家具</a></li>
                            <li><a href="#">板材</a></li>
                            <li><a href="#">饰品</a></li>
                            <img src="../images/indexSelect.png">
                        </ul>
                </div>
                <div class="type">
                    <ul>
                        <li class="A"><a href="#">类型</a></li>
                        <li><a href="#">全部</a></li>
                    </ul>
                </div>
                <div class="texture">
                        <ul>
                        <li class="A"><a href="#">材质</a></li>
                        <li><a href="#">全部</a></li>
                        <li><a href="#">实木</a></li>
                        <li><a href="#">复合</a></li>
                        <li><a href="#">强化</a></li>
                        <li><a href="#">其他</a></li>
                        </ul>
                </div>
                <div class="quality">
                        <ul>
                        <li class="A"><a href="#">品质</a></li>
                        <li><a href="#">全部</a></li>
                        <li><a href="#">大自然</a></li>
                        <li><a href="#">生活家</a></li>
                        <li><a href="#">北美枫情</a></li>
                        <li><a href="#">德尔</a></li>
                        <li><a href="#">博典</a></li>
                        <li><a href="#">船王</a></li>   
                        </ul>                    
                </div>
            </div>
            <!-- 搜索界面 -->
            <div class="search">
                    <div class="search-First">
                        <ul>
                            <li>发布时间 <img src="../images/下箭头.png" alt=""></li>
                            <li>价格 <img src="../images/上箭头.png" alt=""></li>
                            <li>环保节能 <img src="../images/上箭头.png" alt=""></li>
                        </ul>
                    </div>
                    <div class="search-Second">
                        <form>
                            <input type="text">
                            <button><img src="../images/放大镜.png" alt=""><span>搜索</span></button>
                        </form>
                    </div>
                    <div class="search-Third">
                        <img src="../images/问号logo.png" alt=""> <span>了解家居医生建材环保评级标准</span>
                    </div>
                </div>

            <!-- 图片展示 -->
            <div class="parent row">     
                <div class="parent-one row">
                    <div class="child">
                        <img src="../images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板&nbsp;-&nbsp;复合地板</p>
                        <p>单价：128元/m²</p>
                        <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                    </div>
                    <div class="child">
                        <img src="../images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板&nbsp;-&nbsp;复合地板</p>
                        <p>单价：128元/m²</p>
                        <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                    </div>
                    <div class="child"><img src="../images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板&nbsp;-&nbsp;复合地板</p>
                        <p>单价：128元/m²</p>
                        <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                    </div>
                    <div class="child">
                        <img src="../images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板&nbsp;-&nbsp;复合地板</p>
                        <p>单价：128元/m²</p>
                        <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                    </div>
                </div>
                <div class="parent-one row">
                        <div class="child">
                            <img src="../images/data_image.png" alt="">
                            <p>德尔&nbsp;&nbsp;都市系列3001</p>
                            <p>木地板&nbsp;-&nbsp;复合地板</p>
                            <p>单价：128元/m²</p>
                            <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                        </div>
                        <div class="child">
                            <img src="../images/data_image.png" alt="">
                            <p>德尔&nbsp;&nbsp;都市系列3001</p>
                            <p>木地板&nbsp;-&nbsp;复合地板</p>
                            <p>单价：128元/m²</p>
                            <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                        </div>
                        <div class="child"><img src="../images/data_image.png" alt="">
                            <p>德尔&nbsp;&nbsp;都市系列3001</p>
                            <p>木地板&nbsp;-&nbsp;复合地板</p>
                            <p>单价：128元/m²</p>
                            <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                        </div>
                        <div class="child">
                            <img src="../images/data_image.png" alt="">
                            <p>德尔&nbsp;&nbsp;都市系列3001</p>
                            <p>木地板&nbsp;-&nbsp;复合地板</p>
                            <p>单价：128元/m²</p>
                            <h4><b>环保评级:&nbsp;B&nbsp;(可以使用)</b></h4>
                        </div>
                    </div>
                
     </div>
    </div>

    <!-- 页面跳转界面 -->
    <div class="page">
        <div turn-page>
            <a href="#" class="Y">上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="Y">下一页</a>
            <span>共有10页,去第&nbsp;&nbsp;<input type="text">&nbsp;&nbsp;页</span>
            <a class="Q">确定</a>      
        </div>
    </div>

    <!-- 微信二维码界面 -->
    <div class="weixin">
        <img src="../images/small_weixin.png" alt="">
        <p class="J">建材检测&nbsp;需求反馈</p><br>
        <p>亲爱的用户，我们正在不断的完善和更新建材库，<br>若没有找到您想要的信息，请将您想测的建材告诉我们。</p>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="up">
            <div class="zuo">
            <img src="../images/footerLogo.png" alt="">
            <p><b>为室内环境保护把好每一关</b></p>
            <p>家居医生致力于中国人的家居健康问题，通过专的技术<br>研究和测评，倾力协助大众打造绿色环保的人居生活环境。</p>
            </div>
            <div class="you">
                <p>
                    <a href="#">关于我们</a>
                    <a href="#">原版说明</a>
                    <img src="../images/weixin2.png">
                    <a href="#">关于微信</a>
                </p>
                <p>
                    <a href="#">联系我们</a>
                    <a href="#">用户隐私</a>
                    <img src="../images/tianmao.png">
                    <a href="#">天猫旗舰店</a>
                </p>
                <p>
                    <a href="#">加入我们</a>
                    <a href="#">免费声明</a>
                    <img src="../images/shop.png">
                    <a href="#">有赞商城</a>
                </p>
            </div>
        </div>
        <div class="under">
            <p>深圳建筑科学研究院股份公司 &nbsp;家居医生网</p>
            <p class="right">粤ICP备08011321号 ©Copyright All Rights Reserved</p>
        </div>
    </div>
</body>
</html>